import React, { FC, useState } from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Button, Space, Spin, message } from 'antd'
import { PlusOutlined, BarsOutlined, StarOutlined, DeleteOutlined } from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { createQuestion } from '../services/question'
import styles from './index.module.scss'

const ManageLayout: FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  const { loading, run: handleCreateClick, } = useRequest(createQuestion, {
    manual: true,
    onSuccess: (result) => {
      if (result.id) {
        nav(`/question/edit/${result.id}`)
        message.success('创建成功')
      }
    },
  })
  const leftButtons: {
    text: string
    type: 'primary' | 'default' | 'text' | 'link' | 'dashed'
    icon: JSX.Element
    onClick: () => void
    disabled: boolean
  }[] = [
    {
      text: '新建问卷',
      type: 'primary',
      icon: <PlusOutlined />,
      onClick: handleCreateClick,
      disabled: loading,
    },
    {
      text: '我的问卷',
      type: pathname.startsWith('/manage/list') ? 'default' : 'text',
      icon: <BarsOutlined />,
      onClick: () => nav('/manage/list'),
      disabled: false,
    },
    {
      text: '星标问卷',
      type: pathname.startsWith('/manage/star') ? 'default' : 'text',
      icon: <StarOutlined />,
      onClick: () => nav('/manage/star'),
      disabled: false,
    },
    {
      text: '回收站   ',
      type: pathname.startsWith('/manage/trash') ? 'default' : 'text',
      icon: <DeleteOutlined />,
      onClick: () => nav('/manage/trash'),
      disabled: false,
    },
  ]

  return (
    <div className={styles.manageContainer}>
      <div className={styles.left}>
        <Space direction="vertical">
          {leftButtons.map((i, idx) => {
            return (
              <Button
                type={i.type}
                size="large"
                icon={i.icon}
                onClick={i.onClick}
                loading={i.disabled}
                style={{ marginBottom: 5 }}
                key={idx}
              >
                {i.text}
              </Button>
            )
          })}
        </Space>
      </div>
      <div className={styles.right}>
        <Outlet />
      </div>
    </div>
  )
}

export default ManageLayout
